<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="../css/index.css" rel="stylesheet">
        <link href="../framework/reset.css" rel="stylesheet">
        <link href="../framework/icon.css" rel="stylesheet">
        <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="../js/index.js"></script>
		<title>饿了么首页</title>
        <style>
            .title {
                color:#fff;
                display: flex;
                align-items: center;
                font-size:4.3vw;    
            }
        </style>

	</head>
	<body>
		<div class="wrapper">
            <!---头部标题--->
			<header>
                <b style="font-family: 幼圆;color:#fff;font-size: 7vw;display: flex;align-items: center;">饿了么</b>
				<div class="icon-location-box" id ="header">
					<div class="icon-location"> </div>
				</div>
				<div class="title">天津大学北洋园校区格园一斋</div>
			</header>

            
            <!---搜索栏--->
            <div class="search">
                <div class="search-fixed-top" id="fixedbox">
                    <div class="search-box">
                        <i class="fa fa-search" style="margin-right: 5vw;"></i>
                        搜索饿了么商家、商品名称
                    </div>
                </div>
		    </div>


            <!---点餐分类--->
            <ul class="foodtype">
                <li class="transto_list"> <img src="../image/placeholder_img.png"> <p>美食 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>甜点饮品 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>超市便利 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>蔬菜水果 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>看病买药 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>夜宵 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>校园食堂 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>学生价 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>明厨亮灶 </p> </li>
                <li> <img src="../image/placeholder_img.png"> <p>领米粒 </p> </li>
            </ul>
            <!-----横幅广告----->
            <div class="banner">
                <h3>拼好饭</h3>
                <p>只要十块吃好饭</p>
                <a>立即抢购 &gt;</a>
            </div>
            <!----会员--->
            <div class="vip">
                <div class="vip-left">
                    <img src="">
                    <h3 style="font-size: 4.5vw;">会员中心·</h3>
                    <p style="font-size: 3.5vw;">开通会员，享受更多优惠</p>
                </div>
                <div class="vip-right">
                    <p style="font-size: 4.5vw";>立即开通 &gt;</p>
                </div>
            </div>
            <!---推荐商家-->
            <div class="recommend">
                <p style="margin-right: 3vw;">——</p>
                <h3 style="font-size: 4vw;">推荐商家</h3>
                <p style="margin-left: 3vw;">——</p>
            </div>
            <!---商家推荐方式--->
            <ul class="recom_type">
                <li>综合排序<i class="fa fa-caret-down"></i></li>
                <li> 距离最近</li>
                <li> 销量最高</li> 
                <li> 筛选<i class="fa fa-filter"></i></li>
            </ul>
        <!-------推荐商家------>
        <!------1------->
        <ul class="bussiness">
            <li class="tansto">
                <img src="../image/waimai1.jpg">
                <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3 style="font-size: 4.5vw;">LOCO美式牛肉汉堡</h3>
                        <div class="bussiness-info-like">&#8226;</div>                        
                    </div>
                    <div class="bussiness-info-star">
                        <div class="bussiness-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售114单</p>
                        </div>
                        <div class="bussiness-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="bussiness-info-delivery">
                        <p>起送￥20 | 配送￥5</p>
                        <p>3.2km | 30分钟</p>
                    </div>
                    <div class="bussiness-info-explain">
                        <p>超值汉堡</p>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减0.1元</p>
                        </div>
                        <div class="bussiness-info-promotion-right"> 
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon-down">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>


            <!------2------->
            <li class="tansto">
                <img src="../image/waimai1.jpg">
                <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3 style="font-size: 4.5vw;">LOCO美式牛肉汉堡</h3>
                        <div class="bussiness-info-like">&#8226;</div>                        
                    </div>
                    <div class="bussiness-info-star">
                        <div class="bussiness-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售114单</p>
                        </div>
                        <div class="bussiness-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="bussiness-info-delivery">
                        <p>起送￥20 | 配送￥5</p>
                        <p>3.2km | 30分钟</p>
                    </div>
                    <div class="bussiness-info-explain">
                        <p>超值汉堡</p>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减0.1元</p>
                        </div>
                        <div class="bussiness-info-promotion-right"> 
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon-down">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>


            <!------3------->
            <li class="tansto">
                <img src="../image/waimai1.jpg">
                <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3 style="font-size: 4.5vw;">LOCO美式牛肉汉堡</h3>
                        <div class="bussiness-info-like">&#8226;</div>                        
                    </div>
                    <div class="bussiness-info-star">
                        <div class="bussiness-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售114单</p>
                        </div>
                        <div class="bussiness-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="bussiness-info-delivery">
                        <p>起送￥20 | 配送￥5</p>
                        <p>3.2km | 30分钟</p>
                    </div>
                    <div class="bussiness-info-explain">
                        <p>超值汉堡</p>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减0.1元</p>
                        </div>
                        <div class="bussiness-info-promotion-right"> 
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon-down">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>


            <!------4------->
            <li class="tansto">
                <img src="../image/waimai1.jpg">
                <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3 style="font-size: 4.5vw;">LOCO美式牛肉汉堡</h3>
                        <div class="bussiness-info-like">&#8226;</div>                        
                    </div>
                    <div class="bussiness-info-star">
                        <div class="bussiness-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售114单</p>
                        </div>
                        <div class="bussiness-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="bussiness-info-delivery">
                        <p>起送￥20 | 配送￥5</p>
                        <p>3.2km | 30分钟</p>
                    </div>
                    <div class="bussiness-info-explain">
                        <p>超值汉堡</p>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减0.1元</p>
                        </div>
                        <div class="bussiness-info-promotion-right"> 
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon-down">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>


            <!------5------->
            <li class="tansto">
                <img src="../image/waimai1.jpg">
                <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3 style="font-size: 4.5vw;">LOCO美式牛肉汉堡</h3>
                        <div class="bussiness-info-like">&#8226;</div>                        
                    </div>
                    <div class="bussiness-info-star">
                        <div class="bussiness-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售114单</p>
                        </div>
                        <div class="bussiness-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="bussiness-info-delivery">
                        <p>起送￥20 | 配送￥5</p>
                        <p>3.2km | 30分钟</p>
                    </div>
                    <div class="bussiness-info-explain">
                        <p>超值汉堡</p>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减0.1元</p>
                        </div>
                        <div class="bussiness-info-promotion-right"> 
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="bussiness-info-promotion">
                        <div class="bussiness-info-promotion-left"> 
                            <div class="bussiness-info-promotion-left-incon-down">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    <!-------底部四个按钮------->
            <ul class="footer">
                <li onclick="location.href='index.html'">
                    <i class="fa fa-home"></i>
                    <p>首页</p>
                </li>
                <li>
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li onclick="location.href='orderList.html'">
                    <i class="fa fa-file-text-o"></i>
                    <p>订单</p>
                </li>
                <li>
                    <i class="fa fa-user-o"></i>
                    <p>我的</p>
                </li>
            </ul>

        </div>
	</body>
</html>